<template>
  <div class="flex flex-col">
    <!-- 基础数据 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="基础数据" />
      </template>
      <div class="flex flex-row flex-wrap items-center gap-8 p-4">
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary.houseCount" :decimals="0" class="text-3xl" />
          <span class="text-center">楼栋</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary.roomCount" :decimals="0" class="text-3xl" />
          <span class="text-center">房间</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo
            :end-val="summary?.ownConfigSummaryVo?.allOwnMeterConfigCount"
            :decimals="0"
            class="text-3xl"
          />
          <span class="text-center">银联</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary?.allMemberCount" :decimals="0" class="text-3xl" />
          <span class="text-center">用户</span>
        </div>
        <!-- <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo
            :end-val="summary?.meterSummaryVo?.meterSerialServerCount"
            :decimals="0"
            class="text-3xl"
          />
          <span class="text-center">集中器/采集器</span>
        </div> -->
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary?.meterSummaryVo?.meterCount" :decimals="0" class="text-3xl" />
          <span class="text-center">电表</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary?.lfApiSysCount" :decimals="0" class="text-3xl" />
          <span class="text-center">宽带系统接入数</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary?.netSummaryVo?.netAccountCount" :decimals="0" class="text-3xl" />
          <span class="text-center">宽带零售数</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary?.netGroupSummaryVo?.netAccountCount" :decimals="0" class="text-3xl" />
          <span class="text-center">宽带批发数</span>
        </div>
      </div>
    </el-card>
    <!-- 订单数据 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="订单数据" />
      </template>
      <div class="flex flex-row flex-wrap items-center gap-8 p-4">
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo
            :end-val="fenToYuan(summary?.allPayedMoney || 0)"
            :decimals="2"
            class="text-3xl"
          />
          <span class="text-center">累计订单金额</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo
            :end-val="fenToYuan(summary?.allRefundedMoney || 0)"
            :decimals="2"
            class="text-3xl"
          />
          <span class="text-center">累计退款金额</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo
            :end-val="fenToYuan(summary?.allPlatformFeeMoney || 0)"
            :decimals="2"
            class="text-3xl"
          />
          <span class="text-center">平台收入</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary?.allPayedCount" :decimals="0" class="text-3xl" />
          <span class="text-center">总订单</span>
        </div>
        <div class="h-10 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
          <CountTo :end-val="summary?.okPayedCount" :decimals="0" class="text-3xl" />
          <span class="text-center">已支付订单</span>
        </div>
      </div>
    </el-card>
    <!-- 电表充值 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="电表充值" />
      </template>
      <el-row :gutter="16" class="row">
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-电表"
            title="支付额"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.meterSummaryVo?.payedMoneyOfToday || 0)"
            :reference="fenToYuan(summary?.meterSummaryVo?.payedMoneyOfYesToday || 0)"
          />
        </el-col>
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-电表"
            title="支付订单数量"
            :value="summary?.meterSummaryVo?.payedCountOfToday || 0"
            :reference="summary?.meterSummaryVo?.payedCountOfYesToday || 0"
          />
        </el-col>
      </el-row>
      <el-row :gutter="16" class="row">
        <el-col :md="24" :sm="24" :xs="24" :loading="loading">
          <div class="flex flex-row flex-wrap items-center gap-8 p-4">
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.meterSummaryVo.allPayedMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">累计订单金额</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.meterSummaryVo.allRefundedMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">累计退款金额</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.meterSummaryVo.allPlatformFeeMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">平台收入</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.meterSummaryVo.allPayedCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">总订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.meterSummaryVo.okPayedCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">已支付订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.meterSummaryVo.waitPayCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">待支付订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.meterSummaryVo.expirePayCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">逾期未支付订单</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 宽带（零售）充值 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="宽带（零售）充值" />
      </template>
      <el-row :gutter="16" class="row">
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付额"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netSummaryVo?.payedMoneyOfToday || 0)"
            :reference="fenToYuan(summary?.netSummaryVo?.payedMoneyOfYesToday || 0)"
          />
        </el-col>
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付订单数量"
            :value="summary?.netSummaryVo?.payedCountOfToday || 0"
            :reference="summary?.netSummaryVo?.payedCountOfYesToday || 0"
          />
        </el-col>
      </el-row>
      <el-row :gutter="16" class="row">
        <el-col :md="24" :sm="24" :xs="24" :loading="loading">
          <div class="flex flex-row flex-wrap items-center gap-8 p-4">
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.netSummaryVo.allPayedMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">累计订单金额</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.netSummaryVo.allRefundedMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">累计退款金额</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.netSummaryVo.allPlatformFeeMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">平台收入</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netSummaryVo.allPayedCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">总订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netSummaryVo.okPayedCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">已支付订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netSummaryVo.waitPayCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">待支付订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netSummaryVo.expirePayCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">逾期未支付订单</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 宽带（批发）充值 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="宽带（批发）充值" />
      </template>
      <el-row :gutter="16" class="row">
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付额"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netGroupSummaryVo?.payedMoneyOfToday || 0)"
            :reference="fenToYuan(summary?.netGroupSummaryVo?.payedMoneyOfYesToday || 0)"
          />
        </el-col>
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付订单数量"
            :value="summary?.netGroupSummaryVo?.payedCountOfToday || 0"
            :reference="summary?.netGroupSummaryVo?.payedCountOfYesToday || 0"
          />
        </el-col>
      </el-row>
      <el-row :gutter="16" class="row">
        <el-col :md="24" :sm="24" :xs="24" :loading="loading">
          <div class="flex flex-row flex-wrap items-center gap-8 p-4">
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.netGroupSummaryVo.allPayedMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">累计订单金额</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="fenToYuan(summary?.netGroupSummaryVo.allPlatformFeeMoney || 0)"
                :decimals="2"
                class="text-3xl"
              />
              <span class="text-center">平台收入</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netGroupSummaryVo.allPayedCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">总订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netGroupSummaryVo.okPayedCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">已支付订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netGroupSummaryVo.waitPayCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">待支付订单</span>
            </div>
            <div class="h-15 w-20% flex flex-col cursor-pointer items-center justify-center gap-2">
              <CountTo
                :end-val="summary?.netGroupSummaryVo.expirePayCount"
                :decimals="0"
                class="text-3xl"
              />
              <span class="text-center">逾期未支付订单</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 快捷入口 -->
    <MeterShortcutCard />
  </div>
</template>
<script lang="ts" setup>
import MeterComparisonCard from './meter/components/MeterComparisonCard.vue'
import MeterShortcutCard from './meter/components/MeterShortcutCard.vue'
import { CardTitle } from '@/components/Card'
import * as IndexApi from '@/api/zwsj/index'
import { fenToYuan } from '@/utils'

defineOptions({ name: 'Home' })
const loading = ref(true) // 加载中
const summary = ref({
  allPayedCount: 0,
  okPayedCount: 0,
  allPlatformFeeMoney: 0,
  allPayedMoney: 0,
  allRefundedMoney: 0,
  houseCount: 0,
  roomCount: 0,
  emptyRoomCount: 0,
  lfApiSysCount: 0,
  allMemberCount: 0,
  sendedHuaxingSmsCount: 0,
  ownConfigSummaryVo: {
    allOwnMeterConfigCount: 0,
    ownMeterConfigCountOfToday: 0,
    ownMeterConfigCountOfYesToday: 0
  },
  netSummaryVo: {
    netAccountCount: 0
  },
  netGroupSummaryVo: {
    netAccountCount: 0
  },
  meterSummaryVo: {
    payedMoneyOfToday: 0,
    payedCountOfToday: 0,
    payedMoneyOfYesToday: 0,
    payedCountOfYesToday: 0,
    allPayedMoney: 0,
    allRefundedMoney: 0,
    allPlatformFeeMoney: 0,
    meterSerialServerCount: 0,
    meterCount: 0,
    allPayedCount: 0,
    okPayedCount: 0,
    waitPayCount: 0,
    expirePayCount: 0
  }
})

const getSummarys = async () => {
  loading.value = false
  const data = await IndexApi.getSummarys()
  summary.value = data
}
getSummarys()
</script>

<style lang="scss">
.dashboard-editor-container {
  position: relative;
  padding: 32px;
  background-color: rgb(240 242 245);
}

.panel-group {
  margin-top: 9px;

  .card-panel-col {
    margin-bottom: 16px;
  }

  .card-panel {
    position: relative;
    height: 108px;
    overflow: hidden;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    background: #fff;
    border-color: rgb(0 0 0 / 5%);
    box-shadow: 4px 4px 40px rgb(0 0 0 / 5%);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      padding: 16px;
      margin: 14px 0 0 14px;
      border-radius: 6px;
      transition: all 0.38s ease-out;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      margin: 26px 26px 26px 0;
      font-weight: bold;

      .card-panel-text {
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 18px;
        color: rgb(0 0 0 / 45%);
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (width <= 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      float: none !important;
      margin: 14px auto !important;
    }
  }
}
</style>
